<template>
    <transition name="slide">
    	<div class="add-song" v-show="showFlag" @click.stop>
    	  <div class="header">
    	<h1 class="title xxl">添加歌曲到列表</h1>
    	<b class="iconfont icon-close2  yellow closebtn" @click="hide"></b>
    	</div>
    	<div class="search-box-wrapper">
    		<search-box ref='searchBox' @query='querychange'  placeholder="搜索歌曲"></search-box>
    	</div>
    	<div class="shortcut" v-show="!query">
    		<switches @switch='switchItem' :switches='switches' :currentIndex='currentIndex'></switches>
        <div class="list-wrapper">
          <scroll  ref='listplay' class="list-scroll" v-if="currentIndex===0" :data="playHistory">
            <div class="list-inner">
              <song-list :songs='playHistory' @select='selectSong'></song-list>
            </div>
          </scroll>
          <scroll :refreshDelay='refreshDelay' ref='listHistory' class='search-history list-scroll' v-if="currentIndex===1" :data="searchHistory">
            <div class="list-search">
              <search-list @delete='delectOne'
              @select="addquery" :searches="searchHistory"></search-list>
            </div>
          </scroll>
        </div>
    	</div>
    	<div class="search-result" v-show="query">
    		<suggest :query="query" :showSinger='showSinger' @select="selectSuggest" @listScroll="blurInput"></suggest>
    	</div>
      <top-tip ref="tip">
        <div class="tip-title center">
          <i class="iconfont icon-gou yellow mr5"></i>
          <span class="l tiptext">1首歌曲已经添加到列表</span>
        </div>
      </top-tip>
    	</div>
    </transition>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box';
import Suggest from 'base/suggest/suggest';
import {searchMixin} from 'common/js/mixin';
import switches from 'base/switch/switches';
import scroll from 'base/scroll/scroll';
import searchList from 'base/search-list/search-list';
import topTip from 'base/top-tip/top-tip';
import Song from 'common/js/song'
import songList from 'base/songlist/songlist'
import {mapGetters,mapActions} from 'vuex';
export default{
  name:'',
  mixins:[searchMixin],
  data(){
   return{
   	showFlag:false,
   	showSinger:false,
   	currentIndex:0,
   	switches:[{name:'最近播放'},{name:'搜索历史'}],
  }
},
computed:{
...mapGetters(['playHistory'])
},
methods:{
  //显示判断,更新刷新组件 
show(){
	this.showFlag=true;
  setTimeout(()=>{
    if(this.currentIndex===0){
      this.$refs.listplay.refresh()
    }else{
     this.$refs.listHistory.refresh()
    }
  },20)
},
hide(){
	this.showFlag=false
},
// 选择推荐
selectSuggest(){
this.saveSearch()
this.showTip()
},
// 切换index
switchItem(index){
	this.currentIndex=index
},
// 选择 歌曲
selectSong(song,index){
  if(index>=0){
    this.insertSong(new Song(song))
    this.showTip()
  }
},
//展示 tip
showTip(){
this.$refs.tip.show()
},
...mapActions(['insertSong'])
},

  components:{SearchBox,Suggest,switches,scroll,songList,searchList,topTip}
}
</script>

<style rel="stylesheet" lang="less">
    .add-song{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 3;
    background: #222;
    &.slide-enter-active, &.slide-leave-active{
      transition: all 0.3s
    }
    &.slide-enter, &.slide-leave-to{
      transform: translate3d(100%, 0, 0)
    }
    .header{
    position: relative;
      height: 44px;
      text-align: center;
    }
    .title{
    line-height: 44px;
    color: #fff;
    }
     .closebtn{
     position: absolute;
        top: 0;
        right: 8px;
        font-size: 20px;
     }
    .search-box-wrapper{
    margin: 20px;
    }
    .list-wrapper{
    position: absolute;
    top: 165px;
    bottom: 0;
    width: 100%;
    }
    .list-scroll{
         height: 100%;
    overflow: hidden;
    }
    }
    .search-history{
          position: relative;
    margin: 0 20px;
    }
    .tip-title{
      padding: 12px 0;
      font-size: 0;
    }
    .tiptext{
      color: #fff;
    }
</style>
